<template>
	<view class="id-card">
		<!-- <image class="_image"  src="../../static/vip/card.jpg"></image> -->
	    <view class="shang">
	    	<text>你的星球处于试运状态,最多可加入50人</text>
	    </view>
		
		<view class="xia">
			<view class="left">
				<view class="ls">
		  <view class="progress-bar">
		    <view class="progress" :style="{ width: progress + '%' }"></view>
		  </view>
		
		  <!-- <input type="number" v-model="progress" min="0" max="100" step="1" /> -->
		</view>
				<view class="lx">
					<text>申请条件完成进度：{{progress}}%</text>
				</view>
				
			</view>
			<view class="right">
				<button class="bu" type="primary" size="mini">
					<text class="wen">立即升级</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"id-card",
		data() {
			return {
				progress: 33
			};
		}
	}
</script>

<style lang="scss" scoped>
	
	.id-card{
		margin: 0 auto;
		// margin-top: 20rpx;
		width: 90%;
		height: 150rpx;
		background-color: #35363B;
		border-radius: 10rpx;
	}
	.shang>text{
		color: #FDD1A0;
		font-size: 20rpx;
		margin-left: 15rpx;
	}
	.xia{
		display: flex;
	}
	.left{
		width: 280rpx;
		height: 20rpx;
		// background-color: black;
		flex-direction: row;
		margin-top: 15rpx;
		margin-left: 15rpx;
	}
	.left>.lx{
		margin-top: 15rpx;
	}
	
	.left>.lx>text{
		color: white;
		font-size: 20rpx;
	}
.right{
		// width: 60px;
		height: 30rpx;
		// background-color: blue;
		margin-left: 30%;
		// text-align: center;
		margin-top: 35rpx;
		// margin-right: 10rpx;
	}
	.bu{
		white-space: nowrap;
		overflow: hidden;
		background-color: #FDD1A0;
		// margin-top: 5rpx;
		border-radius: 50rpx;
		
	}
	.bu>text{
		color: #946635;
		font-weight: bold;
	}
	.progress-bar {
	  width: 400rpx;
	  height: 8rpx;
	  // border: 1px solid #ccc;
	  margin-top: 15rpx;
	  // margin-left: 15rpx;
	  background-color: gray;
	  border-radius: 10rpx;
	}
	
	.progress {
	  height: 100%;
	  background-color: #FDD1A0;
	  transition: width 0.5s;
	  border-radius: 10rpx;
	}
	
	// .bu>text{
	// 	// width: 40px;
	// 	height: 20px;
	// 	font-size: 20rpx;
	// 	text-align: center;
	// }

</style>
